<template>
    <a-modal v-model="dialog" append-to-body width="900px">
        <a-tabs v-model="activeKey">
            <a-tab-pane key="1" tab="自定义全局监听器" force-render>
                <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="监听类型">
                        <a-select v-model="form.listenerType" placeholder="请选择">
                            <a-select-option v-for="item in listenerTypes" :key="item.value" :value="item.value">
                                {{item.label}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="值" prop="value">
                        <a-input v-model="form.value"/>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
        </a-tabs>
        <div slot="footer" class="dialog-footer">
            <a-button type="text" size="default" @click="cancel">取消</a-button>
            <a-button type="primary" size="default" @click="doSubmit">确认</a-button>
        </div>
    </a-modal>
</template>

<script>
  import { randomString } from '../../utils'

  export default {
    name: 'EventListener',
    data() {
      return {
        dialog: false,
        selectedKeys: [],
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        multiple: true,
        activeKey: '1',
        queryParam: {
          account: '',
          name: ''
        },
        listenerTypes: [
          { value: 'class', label: '类' }
        ],
        form: {
          id: '',
          listenerType: 'class',
          value: ''
        },
        rules: {
          value: [
            { required: true, message: '值不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      rowSelection() {
        return {
          hideDefaultSelections: true,
          selectedRowKeys: this.selectedKeys,
          type: this.multiple ? 'checkbox' : 'radio',
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedRows = selectedRows
            this.selectedKeys = selectedRowKeys
          }
        }
      }
    },
    methods: {
      randomString,
      cancel() {
        this.dialog = false
        this.form = {
          id: '',
          eventType: 'start',
          listenerType: 'class',
          value: ''
        }
      },
      show() {
        this.dialog = true
      },
      doSubmit() {
        this.form.id = randomString(16)
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$emit('callback', this.form, this.activeKey)
            this.cancel()
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
